<template>
	<view class="a">
		<view class="sea">
			<u-search class="search" placeholder="请输入搜索内容" v-model="keyword"></u-search>
		</view>

		<view class="con">
			<view class="rs">
				<p class="title">热搜榜</p>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">十九届六中全会在京召开</view>
					</u-col>
					<u-col span="6">
						<view class="text">中国教授在美用功夫击退劫匪</view>
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">鞍山全城开启步行模式</view>
					</u-col>
					<u-col span="6">
						<view class="text">雪地里的快乐带给你们</view>
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">被这只小猫整破防了</view>
					</u-col>
					<u-col span="6">
						<view class="text">支付宝借呗改名信用贷</view>
					</u-col>
				</u-row>
			</view>
			<view class="cnxh">
				<p class="title2">猜你喜欢</p>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">火影忍者息屏壁纸</view>
					</u-col>
					<u-col span="6">
						<view class="text">男子复刻400座古建筑模型</view>
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">苹果呼吸灯怎么设置</view>
					</u-col>
					<u-col span="6">
						<view class="text">男生帅气头像</view>
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="6">
						<view class="text">三维码是什么</view>
					</u-col>
					<u-col span="6">
						<view class="text">有种冷叫你妈觉得你冷</view>
					</u-col>
				</u-row>
			</view>
			<view class="at">
				<p class="title3">其他</p>
				<view class="other">
					神州十三号首次出舱任务详解
				</view>
				<view class="other">
					东北暴雪最厚将近一米
				</view>
				<view class="other">
					新东方计划成立大型农业平台
				</view>
				<view class="other">
					家庭教育促进法来了
				</view>
				<view class="other">
					辽宁昨日新增20例本土病例
				</view>
				<view class="other">
					你怎么看记者这个职业
				</view>
				<view class="other">
					中国航天员与地球合影
				</view>
				<view class="other">
					德公司否认向解放军提供发动机
				</view>
				<view class="other">
					解放军军机双语广播驱离美军机
				</view>
				<view class="other">
					新冠特效药来了！
				</view>
				<view class="other">
					家庭教育促进法来了
				</view>
				<view class="other">
					辽宁昨日新增20例本土病例
				</view>
				<view class="other">
					你怎么看记者这个职业
				</view>
				<view class="other">
					中国航天员与地球合影
				</view>
				<view class="other">
					德公司否认向解放军提供发动机
				</view>
				<view class="other">
					解放军军机双语广播驱离美军机
				</view>
			</view>
		</view>
		<u-tabbar :list="tabbar"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
			}
		},
		computed: {
			tabbar() {
				return this.$store.state.tabbar
			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.a {
		width: 100%;
		height: 100%;
	}

	.sea {
		height: 100rpx;
		background-color: #fff;
		line-height: 100rpx;
		padding: 0 20rpx;
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
	}

	.con {
		width: 100%;
		height: calc(100% - 200rpx);
		padding: 5rpx 20rpx;
		overflow-y: auto;
	}

	.rs {
		padding: 20rpx;
		border-radius: 8rpx;
		background-color: #FEF0F0;
	}

	.title {
		font-weight: 600;
		margin-bottom: 10rpx;
		color: red;
	}

	.text {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
	}

	.cnxh {
		margin-top: 40rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		background-color: #A0CFFF;
	}

	.title2 {
		font-weight: 600;
		margin-bottom: 10rpx;
		color: #007AFF;
	}

	.at {
		margin-top: 40rpx;
		padding: 20rpx;
		border-radius: 8rpx;
		background-color: #DCDFE6;
	}

	.title3 {
		font-weight: 600;
		margin-bottom: 10rpx;
		color: #909399;
	}

	.other {
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
	}
</style>
